/* 版心 */

.banxin {
    width: 1200px;
    margin: 0 auto;
}


/* 页头 */

#top {
    height: 161px;
    font-size: 14px;
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
}

#top .logo {
    margin: auto 0;
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
}

#top .logo img {
    width: 75px;
    height: 75px;
}

#top .logo div {
    margin-top: 10px;
    margin-left: 20px;
    text-align: center;
    color: #43200c
}

#top .logo div h3 {
    font-size: 28px;
    font-weight: 600;
    line-height: 40px;
}

#top .logo div span {
    display: inline-block;
    font-size: 12px;
    line-height: 17px;
    transform: scale(.8);
}

#top .search {
    margin: auto 0;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    width: 540px;
    height: 48px;
    border: 2px solid #43240c;
    border-radius: 26px;
}

#top .search span {
    font-size: 36px;
    line-height: 48px;
}

#top .search input {
    border: 0;
    width: 354px;
    font-size: 16px;
    line-height: 43px;
    color: #43200c;
    margin-top: 4px;
}

#top .search a {
    width: 124px;
    height: 44px;
    font-size: 22px;
    font-weight: 500;
    line-height: 40px;
    text-align: center;
    color: #43200c;
    background-color: #fee44e;
    border-radius: 34px;
    border-radius: 26px;
    margin-left: 22px;
    margin-top: 2px;
}

#top .icon {
    margin: auto 0;
}

#top .icon ul {
    display: flex;
    flex-direction: row;
}

#top .icon ul li {
    text-align: center;
    display: flex;
    flex-direction: column;
    margin: 10px;
}

#top .icon img {
    width: 40px;
    height: 40px;
    margin-bottom: 8px;
}

#top .icon span {
    display: inline-block;
    font-size: 12px;
    line-height: 17px;
    transform: scale(.8);
}


/* 导航栏 nav */

#nav {
    background-color: #43240c;
    width: 100%;
    height: 46px;
}

#nav ul {
    display: flex;
    flex-direction: row;
}

#nav ul li {
    width: 220px;
    font-size: 16px;
    text-align: center;
    line-height: 46px;
    color: aliceblue;
}

.default {
    background-color: #fee44e;
    color: #43240c !important;
}

#nav ul li:hover {
    background-color: #fee44e;
    color: #43240c;
}


/* 页中 */

#center {
    height: 370px;
    display: flex;
    flex-direction: row;
}


/* 页中分类框 */

#center .fl {
    width: 220px;
}

#center .fl ul {
    width: 220px;
}

#center .fl ul li {
    height: 41px;
    line-height: 41px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    background-color: rgb(252, 249, 227);
}

#center .fl ul li:hover {
    background-color: rgb(255, 255, 255);
}

#center .fl ul li img {
    width: 20px;
    height: 20px;
    margin-top: 10px;
}

#center .fl ul li div {
    margin-left: 20px;
}

#center .fl ul li div a {
    color: #43200c;
    font-size: 14px;
}

#center .fl ul li a:hover {
    color: crimson;
}

#center .zhong {
    display: flex;
    flex-direction: column;
}

#center .zhong .zhong-top {
    display: flex;
    flex-direction: row;
}


/* 轮播图 */

#center .zhong .zhong-top .swiper-container {
    width: 660px;
    height: 234px;
}

#center .zhong .zhong-top .swiper-container img {
    width: 100%;
    height: 100%;
}


/* 九块九抢购 */

#center .zhong .zhong-top .jiukuaijiu {
    cursor: pointer;
    box-sizing: border-box;
    float: left;
    position: relative;
    margin-left: 10px;
    padding: 32px 13px;
    width: 298px;
    height: 234px;
    color: #ff5817;
    background-color: #fff4e4;
    transition: all .3s;
}

#center .zhong .zhong-top .jiukuaijiu:hover {
    box-shadow: 2px 4px 4px rgba(138, 138, 138, 0.473);
}

#center .jiukuaijiu h3 {
    z-index: 3;
    position: absolute;
    top: 32px;
    left: 13px;
    font-size: 24px;
}

#center .jiukuaijiu div {
    z-index: 3;
    position: absolute;
    top: 76px;
    left: 0;
    padding: 0 47px 0 22px;
    font-size: 18px;
    line-height: 36px;
    color: #fff;
    background: url("../img/背景1.png")no-repeat 50%/cover;
}

#center .jiukuaijiu img {
    z-index: 2;
    position: absolute;
    bottom: 0;
    right: 20px;
    height: 134px;
}

#center .zhong .zhong-button {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin-top: 4px;
}

#center .zhong .zhong-button .button-fl {
    overflow: hidden;
    position: relative;
    padding: 26px 34px 16px;
    width: 257px;
    color: #fff;
    background: linear-gradient( 270deg, #ffd1dd, #fca6c0);
    border-radius: 18px;
}

#center .button-fl h3 {
    font-size: 22px;
    font-weight: 600;
}

#center .button-fl p {
    font-size: 18px;
}

#center .button-fl span {
    display: block;
    margin-top: 11px;
    width: 47px;
    font-size: 14px;
    line-height: 20px;
    text-align: center;
    color: #fec17e;
    background-color: #fff;
    border-radius: 10px;
}

#center .button-fl img {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 125px;
    height: 125px;
}

#center .button-fl:hover {
    box-shadow: 2px 4px 4px rgba(138, 138, 138, 0.473);
}

#center .button-fc {
    overflow: hidden;
    position: relative;
    padding: 26px 34px 16px;
    width: 257px;
    color: #fff;
    background: linear-gradient( 270deg, #fffffe, #fec07e);
    border-radius: 18px;
}

#center .button-fc h3 {
    font-size: 22px;
    font-weight: 600;
}

#center .button-fc p {
    font-size: 18px;
}

#center .button-fc span {
    display: block;
    margin-top: 11px;
    width: 47px;
    font-size: 14px;
    line-height: 20px;
    text-align: center;
    color: #fec17e;
    background-color: #fff;
    border-radius: 10px;
}

#center .button-fc img {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 125px;
    height: 125px;
}

#center .button-fc:hover {
    box-shadow: 2px 4px 4px rgba(138, 138, 138, 0.473);
}

#center .button-fr {
    box-sizing: border-box;
    position: relative;
    margin: 0;
    padding: 35px 0 0 34px;
    width: 297px;
    background: linear-gradient( 270deg, #e7f5ff, #afdcff);
    border-radius: 8px;
}

#center .button-fr p {
    font-size: 18px;
    color: #fff;
}

#center .button-fr img {
    box-sizing: border-box;
    position: absolute;
    top: 14px;
    right: 20px;
    width: 100px;
    height: 100px;
    background-color: #fff;
    border-radius: 18px;
    border: 8px solid #afdcff;
}

#center .button-fr:hover {
    box-shadow: 2px 4px 4px rgba(138, 138, 138, 0.473);
}

#contentnav {
    display: flex;
    flex-direction: row;
    margin: 10px auto 20px;
    font-size: 18px;
    line-height: 56px;
    color: #43240c;
    background-color: #fff;
}

#contentnav h3 {
    display: inline-block;
    margin-left: 52px;
    font-size: 18px;
    font-weight: 500;
}

#contentnav p {
    display: inline-block;
    margin-left: 30px;
    font-size: 14px;
    color: #877a73;
}


/* 加载更多按钮 */

#button {
    cursor: pointer;
    margin: 40px auto;
    width: 250px;
    font-size: 24px;
    font-weight: 500;
    line-height: 70px;
    text-align: center;
    color: #43240c;
    background-color: #fee44e;
    border-radius: 35px;
}


/* 页脚 */

#botton {
    width: 100%;
    height: 200px;
    background: #000;
    opacity: .706;
    color: #fff;
    position: relative;
    bottom: 0;
    font-family: PingFang-SC-Medium;
    margin-top: 81px;
    padding-top: 40px;
}

#botton img {
    float: left;
    width: 112px;
    height: 112px;
    margin: 0 20px 0 40px;
}

#botton h3 {
    font-size: 36px;
    font-family: PingFangSC-Semibold;
    font-weight: 600;
}

#botton p {
    margin-top: 10px;
    font-size: 18px;
    font-weight: 500;
    line-height: 25px;
}

#botton a {
    margin: 400px;
    color: #fff;
    text-decoration: none;
    font-size: 20px;
}

#botton a:hover {
    color: #FC8485;
}

#content ul {
    width: 1200px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

#content ul li {
    width: 276px;
    text-align: center;
    position: relative;
    margin: 4px 5px;
}

#content ul li:hover {
    box-shadow: 2px 4px 4px rgba(138, 138, 138, 0.473);
}

#content ul li img {
    width: 276px;
    height: 276px;
}

#content ul li p {
    overflow: hidden;
    font-size: 14px;
    line-height: 18px;
    text-overflow: ellipsis;
    color: #877a73;
    white-space: nowrap;
    margin: 6px 0;
}

#content ul li .sb {
    background-color: #f40;
    float: left;
    box-sizing: border-box;
    margin: 0 6px 0 0;
    padding: 0 6px;
    min-width: 40px;
    font-size: 14px;
    color: blanchedalmond;
    border-radius: 2px;
}

#content ul li .by {
    width: 50px;
    color: #877a73;
    box-shadow: none;
    float: right;
}

#content ul li h3 {
    display: inline-block;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 12px;
    color: #fa585a;
}

#content ul li h1 {
    display: inline-block;
    font-size: 28px;
    line-height: 28px;
    color: #fa585a;
}

#content ul li h2 {
    margin-left: 4px;
    display: inline-block;
    font-size: 14px;
    color: #877a73;
    letter-spacing: 0;
}

#content ul li div {
    text-align: left;
    margin-top: 35px;
}

#content ul li .quan {
    margin: 6px;
    position: absolute;
    bottom: 1px;
    right: 0;
    padding: 0;
    width: 50px;
    font-size: 12px;
    line-height: 20px;
    color: #fa585a;
    text-align: center;
    border-radius: 2px;
    box-shadow: inset 0 0 0 1px #fa585a;
    vertical-align: bottom;
}


/* 返回顶部按钮 */

.plug-in {
    position: fixed;
    bottom: 200px;
    right: 20px;
    width: 60px;
    height: 60px;
    background-color: yellow;
    border-radius: 50%;
    text-align: center;
    color: white;
    font-size: 16px;
}

.plug-in span {
    font-size: 32px;
}

.yyy {
    display: none;
}